/**
 * WidgetEventExtend module
 */

import React,{Component} from "react";
import { connect } from 'dva';
import classnames from 'classnames';
import { bindActionCreators } from 'redux';
import widgetsActions from '../../../actions/Editor/widgets';
import editorActions from '../../../actions/Editor/editor';
import tool from "../../../utils/tool";
import consts from "../../../utils/consts";
import storage from "../../../utils/storage";
// var dataProvider from"../provider/dataProvider");

class WidgetEventExtend extends Component {
    getInitialProps(){
        return {
            root: {},
            form: {},
            widget: {}
        }
    }
    componentDidMount(){
        this.elements = {};
        this.elements.textarea = $(this.refs.textarea);
        this.elements.test = $('body');
        if (typeof KindEditor !== "undefined"){
            let self = this;
            let kindOpts = {
                uploadJson: storage.data.CONST.upload_url,
                // resize forbidden
                resizeType: 0,
                // paste forbidden
                pasteType: 1,
                allowImageUpload: true,
                items: [
                    'bold', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'link', '|', 'image'
                ],
                width: "94%",
                afterBlur: function(){
                    self.handleOnContentChanged();
                },
                useContextmenu: false,//屏蔽自定义右键功能
                allowUpload:false,
                dialog:{
                    width: 684,
                    height: 300,
                }
            };
            const {widget} = self.props,{action} = widget,{content} = action || "";
            let id = "#"+ widget.id;
            this.editor = KindEditor.create(id, kindOpts);
            this.editor.clickToolbar('image',function(){
                self.editor.loadPlugin('image',function(){
//                storage.data.is_edit_extend = true;
//                root.openDialog(consts.WIDGET_TYPE.PICTURE,false,self);
                    console.log('open dialog');
                self.editor.hideDialog();
                })
            })
            this.editor.clickToolbar('link',function(){
                self.editor.loadPlugin('link',function(){
//                    root.openDialog(consts.WIDGET_TYPE.LINK,false,self);
                    console.log('open dialog');
                    self.editor.hideDialog();
                })
            })
            this.editor.html(content);
        }
    }
    componentWillUnmount(){
        this.handleOnContentChanged();
    }
    handleOnContentChanged(){
        let content = this.editor.html();
        if(!content) return false;
        // 过滤换行符
        content = content.replace(/\r/g, "");
        content = content.replace(/\n/g, "");

        const {widget,updateWidget,setState} = this.props;
        let data = widget;
        let type = 'content';
        data.action = tool.rebuildWidgetData(data.action, type, content);
        setState({selectedWidget: data});
        updateWidget(data);
    }
    rebuildContent(srcs){
        const {widget,updateWidget,setState} = this.props;
        let self = this;
        let content = self.editor.html();
        let data = widget;
        srcs.forEach(function(src){
            let img = '<img src="'+src+'" width="100%" />';
            content = content+img;
        })
        self.editor.html(content);
        data.action.html = content;
        setState({selectedWidget: data});
        updateWidget(data);
    }
    render(){
        const {widget} = this.props;
        const {id} = widget;
        return (
            <div className="btg-modal-content">
                <textarea id={id} ref="textarea" style={{width:"180px",height:"400px"}}></textarea>
            </div>
        )
    }
}

const mapStateToProps = ({ editor, widgets}) => {
  const pageId = editor.selectedPageId;
  return {
      widget: editor.selectedWidget,
      widgets: widgets.filter(w => w.page_id === pageId),
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({...widgetsActions,...editorActions}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(WidgetEventExtend);
